<script setup lang="ts">
import { Ref, ref, onMounted, onBeforeUnmount } from 'vue';
import { Switch } from '@element-plus/icons-vue';
//@ts-ignore
import { debounce } from '../../../util/debounceThrottle';

const primaryLanguage: Ref<string> = ref('英语');
const secondaryLanguage: Ref<string> = ref('中文');
const inputValue: Ref<string> = ref('');
const inputRef: Ref<null | HTMLElement> = ref(null);
const isCleared: Ref<boolean> = ref(false);
let initialTextareaHeight: number = 0;
let observer: MutationObserver | null = null;
let hasContent: boolean = false;
const textareaStyle = ref({
  border: 'none',
  boxShadow: 'none',
  padding: '0',
  fontSize: '20px',
  backgroundColor: 'rgba(255, 255, 255, 0)'
});

const exchangeLanguage = () => {
  const temp = primaryLanguage.value;
  primaryLanguage.value = secondaryLanguage.value;
  secondaryLanguage.value = temp;
};
const sendTextMessage = () => {
  //@ts-ignore
  if (inputValue.value.trim() !== '') {
    hasContent = true;
    isCleared.value = false;
    //@ts-ignore
    window.resizeAPI.updateWindowOnMessageReceived({
      _from: primaryLanguage.value,
      _to: secondaryLanguage.value,
      requiredText: inputValue.value
    });
  }else if(hasContent) {
    isCleared.value = true;
    hasContent = false;
    //@ts-ignore
    window.resizeAPI.monitorTextEmpty();
  }
};
const debouncedSendTextMessage = debounce(sendTextMessage, 1000);
// 窗口大小变化通知
const notifyWindowResize = (changeHeight: number) => {
  // @ts-ignore
  window.resizeAPI.DynamicWindowResizer(changeHeight);
};

//初始化观察者
const initObserver = () => {
  // @ts-ignore
  const textareaElement = inputRef.value.$el.querySelector('textarea');
  if (!textareaElement) return;
  observer = new MutationObserver(() => {
    const textareaHeight: number = textareaElement.offsetHeight;
    if (initialTextareaHeight === textareaHeight) {
      return;
    }
    const changeHeight: number = textareaHeight - initialTextareaHeight;
    initialTextareaHeight = textareaHeight;
    console.log(`textareaHeight el height is ${textareaHeight}`);
    notifyWindowResize(changeHeight);
  });

  //观察者模式 监视 textarea的style属性变动
  observer.observe(textareaElement, {
    attributes: true,
    attributeFilter: ['style']
  });
};

//组件初始化
onBeforeUnmount(() => {
  if (observer) {
    observer.disconnect();
  }
});
onMounted(() => {
  initObserver();
});
</script>
<template>
  <div class="fixed-window">
    <div class="language-selection">
      <el-row justify="space-between" gutter="30">
        <el-col
          span="8"
          class="language-text"
          :style="{
            boxShadow: 'var(--el-box-shadow-light)'
          }"
        >
          <el-text size="large">{{ primaryLanguage }}</el-text>
        </el-col>
        <el-col
          span="8"
          :size="{
            boxShadow: 'var(--el-box-shadow-dark)'
          }"
        >
          <el-button
            size="small"
            class="switch-button-style"
            color="rgb(250, 250, 250)"
            @click="exchangeLanguage"
          >
            <el-icon :size="20">
              <Switch />
            </el-icon>
          </el-button>
        </el-col>
        <el-col
          span="8"
          class="language-text"
          :style="{
            boxShadow: 'var(--el-box-shadow-light)'
          }"
        >
          <el-text size="large">{{ secondaryLanguage }}</el-text>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-divider border-style="solid" class="partition-line"></el-divider>
      <el-input
        ref="inputRef"
        type="textarea"
        class="search-input"
        v-model="inputValue"
        placeholder="请输入内容"
        :input-style="textareaStyle"
        :autosize="{ minRows: 1, maxRows: 100 }"
        @input="debouncedSendTextMessage"
      ></el-input>
    </div>
  </div>
</template>

<style scoped>
.search-input {
  position: relative;
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  width: 390px;
  app-region: no-drag;
}

.language-selection {
  position: relative;
  display: flex;
  margin-bottom: 10px;
  margin-left: 25px;
  -webkit-user-drag: none;
}

.language-selection .switch-button-style {
  border-radius: 15%;
  border: 1px solid rgb(240, 240, 240);
  app-region: no-drag;
}

.language-selection .language-text {
  border-radius: 10%;
  border: 1px solid white;
  background-color: rgb(250, 250, 250);
  -webkit-user-select: none;
}

.partition-line {
  position: relative;
  height: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.fixed-window {
  position: fixed;
  width: 100%;
}
</style>
